<template>
  <!-- 统计组件 -->
  <div class="statisticComponentPage">
    <div class="bigDataCardBox" :style="`justify-content:${getJustifyContent}`">
    <public-card v-for="(n, i) in cardArr" :key="i" :title="n.title" :url="n.url" :unit="n.unit" :num="n.num" :get-width="getWidth" :icon-type="iconType"></public-card>
    </div>
  </div>
</template>

<script setup>
import PublicCard from "@/components/uploadCom/public-card.vue";
const props = defineProps({
  cardArr: {
    type: Array,
    default: [],
    required: true,
  },
  getWidth: {
    // 每一项的宽度
    type: String,
    default: '250px',
    required: true,
  },
  getJustifyContent: {
    // 布局方式
    type: String,
    default: "space-around",
    required: false,
  },
  iconType:{
      type:String,
      default:'img',
      required:false
  }
});
</script>

<style lang="scss" scoped>
.statisticComponentPage {
  .bigDataCardBox {
    margin-bottom: 46px;
    display: flex;
  }
}
</style>
